<template>
  <div class="function">
    <div class="function__checks">
      <Check :title="'上线状态'" class="function__checks__check" />
      <Check :title="'搭载方式'" class="function__checks__check" />
      <Check :title="'一级类别'" class="function__checks__check" />
      <Check :title="'二级类别'" class="function__checks__check" />
      <Check :title="'三级类别'" class="function__checks__check" />
      <Check :title="'功能名称'" class="function__checks__check" />
      <Search class="function__checks__search" />
      <Reset class="function__checks__reset" />
    </div>
    <ul class="function__list">
      <li class="function__list__line function__list__title">
        <span class="function__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="function__list__line__block">功能名称</span>
        <span class="function__list__line__block">功能图片</span>
        <span class="function__list__line__block">一级类别</span>
        <span class="function__list__line__block">二级类别</span>
        <span class="function__list__line__block">三级类别</span>
        <span class="function__list__line__block">上线状态</span>
        <span class="function__list__line__block">搭载方式</span>
        <span class="function__list__line__block">功能描述</span>
        <span class="function__list__line__block">技术方案</span>
        <span class="function__list__line__block">产品策略</span>
      </li>
      <li class="function__list__line function__list__content">
        <span class="function__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="function__list__line__block">定时充电</span>
        <span class="function__list__line__block"
          ><img src="@/assets/img/1.jpg" alt=""
        /></span>
        <span class="function__list__line__block">手机远控</span>
        <span class="function__list__line__block">充电管理</span>
        <span class="function__list__line__block">预约充电</span>
        <span class="function__list__line__block">新增</span>
        <span class="function__list__line__block">出厂搭载</span>
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电。同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电</span
        >
      </li>
      <li class="function__list__line function__list__content">
        <span class="function__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="function__list__line__block">定时充电</span>
        <span class="function__list__line__block"><img src="@/assets/img/1.jpg" alt=""
        /></span>
        <span class="function__list__line__block">手机远控</span>
        <span class="function__list__line__block">充电管理</span>
        <span class="function__list__line__block">预约充电</span>
        <span class="function__list__line__block">新增</span>
        <span class="function__list__line__block">出厂搭载</span>
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电。同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电</span
        >
      </li>
      <li class="function__list__line function__list__content">
        <span class="function__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="function__list__line__block">定时充电</span>
        <span class="function__list__line__block"><img src="@/assets/img/1.jpg" alt=""
        /></span>
        <span class="function__list__line__block">手机远控</span>
        <span class="function__list__line__block">充电管理</span>
        <span class="function__list__line__block">预约充电</span>
        <span class="function__list__line__block">新增</span>
        <span class="function__list__line__block">出厂搭载</span>
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电。同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电</span
        >
      </li>
      <li class="function__list__line function__list__content">
        <span class="function__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="function__list__line__block">定时充电</span>
        <span class="function__list__line__block"><img src="@/assets/img/1.jpg" alt=""
        /></span>
        <span class="function__list__line__block">手机远控</span>
        <span class="function__list__line__block">充电管理</span>
        <span class="function__list__line__block">预约充电</span>
        <span class="function__list__line__block">新增</span>
        <span class="function__list__line__block">出厂搭载</span>
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电。同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电</span
        >
      </li>
      <li class="function__list__line function__list__content">
        <span class="function__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="function__list__line__block">定时充电</span>
        <span class="function__list__line__block"><img src="@/assets/img/1.jpg" alt=""
        /></span>
        <span class="function__list__line__block">手机远控</span>
        <span class="function__list__line__block">充电管理</span>
        <span class="function__list__line__block">预约充电</span>
        <span class="function__list__line__block">新增</span>
        <span class="function__list__line__block">出厂搭载</span>
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电。同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电</span
        >
      </li>
      <li class="function__list__line function__list__content">
        <span class="function__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="function__list__line__block">定时充电</span>
        <span class="function__list__line__block"><img src="@/assets/img/1.jpg" alt=""
        /></span>
        <span class="function__list__line__block">手机远控</span>
        <span class="function__list__line__block">充电管理</span>
        <span class="function__list__line__block">预约充电</span>
        <span class="function__list__line__block">新增</span>
        <span class="function__list__line__block">出厂搭载</span>
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电。同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制同时可以开启车辆电池的温度控制</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行</span
        >
        <span class="function__list__line__block"
          >定时出发功能可以像闹钟一样设置，指定车辆在工作日或整周按照规则进行充电</span
        >
      </li>
    </ul>
    <el-pagination
      @current-change="next"
      background
      small
      layout="prev, pager, next"
      :total="100"
      class="function__page"
      :current-page="1"
    />
  </div>
</template>
<script>
import Check from "@/components/Check.vue";
import Reset from "@/components/Reset.vue";
import Search from "@/components/Search.vue";
export default {
  components: { Check, Search, Reset },
  setup() {},
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
.function {
  flex: 1;
  padding: 0 2.1rem;
  &__checks {
    &__check {
      margin-left: 3.2rem;
      margin-bottom: 1.9rem;
      &:first-child {
        margin-left: 0;
      }
      &:nth-child(4) {
        margin-right: 9rem;
      }
      &:nth-child(5) {
        margin-left: 0;
      }
    }
    &__search {
      margin-left: 47.9rem;
    }
    &__reset {
      margin-left: 3.2rem;
    }
  }
  &__list {
    margin: 0 auto;
    margin-bottom: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid $light-gray;
    li:nth-of-type(2n-1) {
      background-color: $light-gray;
    }
    // 表头
    &__title {
      font-weight: bolder;
      height: 5.7rem !important;
      line-height: 5.7rem !important;
    }
    // 内容
    &__content {
      span {
        overflow: scroll;
        scale: 0.85;
      }

      span:nth-of-type(3) {
        display: flex;
        align-items: center;
        scale: 1;
        transition: .3s ease;
        img {
          width: 12rem;
          cursor: pointer;
          border-radius: .2rem;
        }
      }
      span:nth-of-type(3):hover{
        scale: 1.1;
      }
      span:nth-of-type(9) {
        width: 22.1rem;
        overflow: scroll;
        text-align: left;
        line-height: 2.5rem;
      }
      span:nth-of-type(10) {
        width: 22.1rem;
        overflow: scroll;
        text-align: left;
        line-height: 2.5rem;
      }
      span:nth-of-type(11) {
        width: 22.1rem;
        overflow: scroll;
        text-align: left;
        line-height: 2.5rem;
      }
    }
    // 通用
    &__line {
      display: flex;
      text-align: center;
      height: 9.5rem;
      line-height: 9.5rem;
      span {
        overflow: scroll;
      }
      span::-webkit-scrollbar {
        display: none;
      }
      span:nth-of-type(1) {
        width: 4.3rem;
        scale: 1;
        input {
          position: relative;
          top: 0.3rem;
        }
      }
      span:nth-of-type(2) {
        width: 8.1rem;
      }
      span:nth-of-type(3) {
        width: 12.5rem;
      }
      span:nth-of-type(4) {
        width: 6.7rem;
      }
      span:nth-of-type(5) {
        width: 6.4rem;
      }
      span:nth-of-type(6) {
        width: 6.9rem;
      }
      span:nth-of-type(7) {
        width: 6.9rem;
      }
      span:nth-of-type(8) {
        width: 6.6rem;
      }
      span:nth-of-type(9) {
        width: 22.1rem;
      }
      span:nth-of-type(10) {
        width: 15rem;
      }
      span:nth-of-type(11) {
        width: 17.5rem;
      }
    }
  }
  &__page {
    width: min-content;
    margin: 0 auto;
    margin-top: 2.4rem;
  }
}
</style>